/*
 * @Description: 列表
 * @Author: Zzt
 * @Date: 2022-11-27 16:43:08
 * @LastEditTime: 2023-01-07 11:49:01
 */
import { IPageQuery } from '@/interfaces/global';
import { Button, Space, Table } from 'antd';
import Column from 'antd/es/table/Column';
import { useEffect, useMemo, useState } from 'react';
// import EditReport from './dialogs/EditReport';
// import ReportEdit from './dialogs/ReportEdit';
import { getListItemValue } from '@/utils/list';
import { CheckCircleTwoTone } from '@ant-design/icons';
import { useCDVolumManageContext } from '../contexts/CDVolumManageContext';
import { formatDate } from '@/utils';
import { ColumnsType } from 'antd/lib/table';
import EditCDDialog from './dialogs/EditCD';
export const unitList = [
  { name: 'GB', value: 0 },
  { name: 'MB', value: 1 }
];
const List = () => {
  const { cdVolumList, getCDVolumManageList, setSelectKey, selectItems, deleteDiskFunc } =
    useCDVolumManageContext();
  const columns: ColumnsType = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center'
    },
    {
      title: '光盘名称',
      dataIndex: 'diskName',
      key: 'diskName',
      align: 'center'
    },
    {
      title: '光盘容量',
      dataIndex: 'diskVolume',
      key: 'diskVolume',
      align: 'center',
      render: (val, record: any) => (record.volumeType === 1 ? '-' : val)
    },
    {
      title: '单位',
      dataIndex: 'volumeUnit',
      key: 'volumeUnit',
      align: 'center',
      render: (val, record: any) =>
        record.volumeType === 1 ? '' : getListItemValue(val, unitList, 'name', 'value')
    },
    {
      title: '创建人',
      dataIndex: 'operatorName',
      key: 'operatorName',
      align: 'center'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      render: (val, record: any) => formatDate(val)
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (_text, record: any) => {
        return (
          <Space>
            <Button
              type="link"
              onClick={() => {
                showEditDialog(record);
              }}
            >
              编辑
            </Button>
            <Button
              type="text"
              danger
              onClick={() => {
                delDisk(record.id);
              }}
            >
              删除
            </Button>
          </Space>
        );
      }
    }
  ];
  // 编辑光盘弹窗
  const [editCDTypeVisible, setEditCDTypeVisible] = useState(false);
  // 编辑的数据
  const [editData, setEditData] = useState({});
  // 表格加载
  const [loading, setLoading] = useState(false);
  // 总条目数
  const [total, setTotal] = useState(0);
  // 表格请求参数
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });

  useEffect(() => {
    setLoading(true);
    if (listQuery) {
      setLoading(false);
      setTotal(0);
      getCDVolumManageList(listQuery)
        .then((res: any) => {
          setTotal(res?.totalCount);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [listQuery]);

  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };
  // 表格选项相关设置
  const onSelectChange = (selectedKeys: number[]): void => {
    setSelectKey(selectedKeys);
  };

  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  const showEditDialog = (data: any) => {
    setEditData(data);
    setEditCDTypeVisible(true);
  };

  const closeEditDialog = () => {
    setEditCDTypeVisible(false);
  };

  const delDisk = (id: number) => {
    deleteDiskFunc(id);
  };
  return (
    <>
      <Table
        columns={columns}
        dataSource={cdVolumList}
        loading={loading}
        rowKey="id"
        rowSelection={rowSelection}
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          showTotal: (total) => `共 ${total} 条`,
          onChange: pageChange
        }}
        scroll={{
          x: 'max-content'
        }}
        bordered
      ></Table>
      {useMemo(
        () => (
          <EditCDDialog
            visible={editCDTypeVisible}
            data={editData}
            onClose={() => {
              closeEditDialog();
            }}
          />
        ),
        [editCDTypeVisible]
      )}
    </>
  );
};
export default List;
